<!doctype html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <meta name="Keywords",content="birthday">
        <meta name="Description",content="happy birthday to little autumn">
        <title>小秋秋生日快乐</title>
        <style type="text/CSS">
		  body{margin:0;}
		  header{
		      width:100%;
			  height:760px;
			  background-image:url("back.jpg");
			  }
         
          .main{
		      overflow:hidden;
		      position:relative;
              width:350px;
              height:350px;
      	      background-image:url("love.jpg");
              margin:100px auto 0;
			  border-radius:5px;
			  
          }
          .main:hover{
		  background-size:50%;
		  }
		  .main:hover #shadow{
		      left:0;
		  }

		  #shadow{
		      position:absolute;
			  left:-350px;
              width:350px;
			  height:350px;
			  background-color:rgba(0,0,0,.5);
			  color:#fff;
			  transition:1s;
         }

		 .main div h2{
		      height:95px;
			  text-align:center;
			  line-height:95px;
		 }

		 .main div li{
		      height:45px;
		      margin-left:10px;
		      line-height:45px;
			  transition:1s;
			  cursor:pointer;
			  font-size:26px;
		 }

		 .main div li:hover{
		      font-size:32px;
			  margin-left:20px;
		 }

		 .ha{
		      text-align:center;
		 }

		 a{text-decoration:none
		 color: rgba(255,0,0,0);}

        </style>

    </head>
    <body>
        <h1 class='ha'>happy birthday<br/>廖静秋</h1>
		<header>

        <div class='main'>
		      <div id="shadow">
			       <h2>祝我的小可爱22岁生日快乐</h2>
			       <ul>
			            <li><a href="https://cantarella.gitee.io/100_days_memorial/" target=blank style="color:rgb(255,255,255)"><b>点我</b>（唔）</a></li>
				        <li><a href="https://cantarella.gitee.io/100_days_memorial/" target=blank style="color:rgb(255,255,255)"><b>点我</b>(嗯）</a></li>
			       </ul>
			  <div>
        </div>
		</header>
    </body>
</html>

